import { useApp } from "@/pinia/modules/app";
import { Fragment } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  name: "SideBarComponent",
  setup() {
    const route = useRoute();
    const { isCollapsed, menus } = storeToRefs(useApp());

    onMounted(() => {});

    const renderMenuItem = (route) => (
      <el-menu-item index={route.url}>
        {route.icon && route.icon != "" && (
          <el-icon size="16px">
            <svg-icon iconName={route.icon} />
          </el-icon>
        )}
        <span>{route.title}</span>
      </el-menu-item>
    );

    const renderSubMenu = (route) => (
      <el-sub-menu
        index={route.url}
        v-slots={{
          title: () => (
            <Fragment>
              <el-icon size="16px">
                <svg-icon iconName={route.icon} />
              </el-icon>
              <span>{route.title}</span>
            </Fragment>
          ),
        }}
      >
        {route.children.map((child) => renderMenuItem(child))}
      </el-sub-menu>
    );

    return () => (
      <div class="aside-left">
        <el-scrollbar>
          <el-menu
            collapse={isCollapsed.value}
            collapse-transition
            router
            default-active={route.path}
            unique-opened
          >
            {menus.value.map((route) =>
              route.children && route.children.length > 0
                ? renderSubMenu(route)
                : renderMenuItem(route)
            )}
          </el-menu>
        </el-scrollbar>
      </div>
    );
  },
});
